<?
        require_once('../inc/facebook.php');
        $facebook = new Facebook(array(
                'appId' => '131767100314470',
                'secret' => '6c9a0decc14bbd2cb570d8a60f9cef16'
        ));
        
        $fbUser = $facebook->getUser();
        //echo $facebook->getAccessToken();
		if(isset($_POST['checkout']))
        {
           
       	}	
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Home Page</title>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="../inc/bootstrap.css">
    <style type="text/css" >
        .error { color: red; }
                input.error { border-color: red; }
                .item {
                        width: 175px;
                        float: left;
                        margin: 15px;
						border: dotted, thin;
                }
                .cart {
                        clear: both;
                        float: right;
                }
                .cart img {
                        width: 20px;
                }
                .img-wrapper{
                        height: 150px;
						
                }
				.shoppingcart{
				float: left;
				width: 200px; 
				position: relative;
				}
				.fb_login{
				float: left;
				height: 50px;
				width: 50px;
				position:relative
				}
        </style>
</head>

<body>
        <? include('../inc/header.php'); ?>
        <div class="container">
			<div id="fb_login">
                        
                        <? if($fbUser): ?>
                                <img src="http://graph.facebook.com/<?=$fbUser?>/picture" />
                                <a href="<?=$facebook->getLogoutUrl()?>">Log Out</a>
                        <? else: ?>
                                <a href="<?=$facebook->getLoginUrl(array('scope' => 'read_stream, friends_likes'))?>">
                                        Log in with Facebook
                                </a>
                        <? endif; ?>
        	</div>
            <div id="contents" style="width: 650px; float: right;">                        
            </div>
            <div id="sitenav" style="width: 200px; float: left">
            <? include('../inc/nav.php'); ?> 
             <div id="shoppingcart">
                        <div style="float:left; padding-right:10px"><h4 id="cart_count" align="Left">Shopping Cart</h4></div>
                        <img src="../Static/img/shop_cart.png" width="25" height="25" alt="Shopping Cart" align="left" float="left" style="padding-right:10px; margin-top:10px; height:20px; width:20px" />
       		<div id="cartitems" style="float: left">
        	</div>
                  <input class="btn btn-primary" type="submit" value="Checkout" name="checkout" />

            <div> 
            </div>           
           
        		
             
            
        
		</div>
         
    <script id="cart_template" type="text/x-handlebars-template">
          <ul class="unstyled cart">
          {{#each items}}
                {{> t_cart_item}}
          {{/each}}             
          </ul>
        </script>
        
        <script id="cart_item_partial_template" type="text/x-handlebars-template">
         <li id="cart_item_{{id}}">
                <img src="../Static/img/products/{{id}}.jpg"/>
            {{id}}
                <input type="number" name="quantity" placeholder="{{count}}" />
          </li>
        </script>
        
<script id="products_template" type="text/x-handlebars-template">
          {{#each aaData}}
                <div class="item">
                        <div class="img-wrapper">
                                <img src="../Static/img/products/{{id}}.jpg" height="100px"/>                         
                        </div>
                        <h6>
                                {{ProductName}}
								<br/>
                                <span class="badge badge-important">{{Stock}}</span>
								in stock
                        </h6>
                        <h5>Our Price: ${{Price}}</h5>
                        <a class="add-to-cart-link" href="../API/Cart.php?id={{id}}">
                                <img src="../Static/img/btn_add_to_cart.png" />
                        </a>
                </div>  
          {{/each}}
        </script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js">
        </script>
          <script type="text/javascript">
                $(function(){
                        var t_cart = Handlebars.compile($("#cart_template").html());
                        var t_cart_item = Handlebars.compile($("#cart_item_partial_template").html());
                        var t_products = Handlebars.compile($("#products_template").html());
                        Handlebars.registerPartial('t_cart_item', t_cart_item);
                        
                        
                        $.get('../API/Products.php', function(data){
                                                $("#contents").html(t_products(data));
                        },'json');
                        
                        $.get('../API/Cart.php', function(data){
                                    var values = $.map( data, function( value, index ) {
                                      return value;
                                    }); 
                                        $("#cartitems").html(t_cart({items: values}));                 
                        },'json');
                        
                        $(".add-to-cart-link").live('click',function(){
                                $.post(this.href, {_method: 'POST', count: 1}, function(data){
                                        if($("#cart_item_" + data.id).length > 0)
                                                        $("#cart_item_" + data.id).replaceWith(t_cart_item(data));
                                        else
                                                        $(".cart").append(t_cart_item(data));
                                },'json');
                                return false;
                        });
                })
        </script>
       
</body>
</html>